<template>
  <div class="event1">
    <h3>我是event4组件:实现v-model</h3>
    <h4>子组件v-model的值：{{ modelValue }}</h4>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";

//props的类型
interface event4Props {
  modelValue: number;
}
//这里结构出来的变量不具备响应式的
// const { modelValue } = defineProps<event4Props>();
const props = defineProps<event4Props>();

const { modelValue } = toRefs(props);

//emits的类型
interface event4Emits {
  (e: "update:modelValue", num: number): void;
}
let $emit = defineEmits<event4Emits>();
</script>

<style scoped lang="scss">
.event1 {
  height: 200px;
  width: 400px;
  background: pink;
}
</style>
